<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .input{width:200px;height:30px;line-height: 30px;position: relative;}
    .input input{width: 200px;height: 30px;padding: 0;margin: 0;background: none;}
    .input span{position: absolute;left:0;top:0;right:0;bottom:0;z-index: -1;color: #777;}
  </style>
</head>
<body>
  <input type="text" placeholder="这是默认提示">

  <div class="input">
    <input type="text">
    <span>这是默认提示</span>
  </div>
</body>
<script>
  
  var ipt = document.querySelector(".input input");
  var span = document.querySelector(".input span");

  // 通过观察得知，input的placeholder是在输入框输入内容的过程中，根据输入框内容是否为空，决定自身显示或隐藏
  // 为空，显示
  // 不为空，隐藏

  ipt.oninput = function(){
    if(this.value === ""){
      span.style.display = "block";
    }else{
      span.style.display = "none";
    }
  }


</script>
</html>